<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body,html{
				padding:0;margin:0px;width:100%;
				text-align: center;
			}
			#myCanvas{
				display: inline-block;
				margin:25px auto;
				border:1px solid red; 
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas">您的浏览器不支持 HTML5 canvas 标签。</canvas>
	</body>
	<script  type="module">
		/*
			 带颜色的三角形 这节主要是通过对buffer的参数进行了相关的设置，比如从哪个位置开始，填充buffer数据
			 
		*/ 
		import initShader from "./js/createShader.js"
		var canvas = document.getElementById("myCanvas"); 
		canvas.width = 500;
   		canvas.height = 500;
		var gl=canvas.getContext("webgl")   

		let vertexShader=` 
			attribute vec2 a_position;
			uniform float u_size;
			attribute vec3 a_color;
			varying vec3 v_color;
			void main(){
				v_color=a_color;
				gl_Position=vec4(a_position,0.0,1.0);
				gl_PointSize=u_size;
			}
		`;
		let fragementShader=`
			//接受js环境的变量值
			precision mediump float;
			varying vec3 v_color;
			void main(){
				// gl_FragColor=vec4(1.0,0.0,0.0,1.0);
				gl_FragColor=vec4(v_color,1.0); 
			} 
		`;   

		//初始化变量
		initShader(gl,vertexShader,fragementShader);

		//定义清空后的颜色值	
		gl.clearColor(0.0,0.0,0.0,1.0);
		//清空画布
		gl.clear(gl.COLOR_BUFFER_BIT); 	  
		

		//顶点数组信息
		let vertexAry=[ 
			-0.5, 0.0, 1.0, 0.0, 0.0,
			0.0,  0.5, 0.0, 1.0, 0.0,
			0.5,  0.0, 0.0, 0.0, 1.0,
		]
		

		//将64位转化成32位
		 vertexAry=new Float32Array(vertexAry); 
		//丈量数字所占用byte的长度
		 let size=vertexAry.BYTES_PER_ELEMENT;
		console.log("BYTE长度",size);
			

		// 创建buffer数组
		let buffer=gl.createBuffer();
		//绑定buffer
		gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
		//绑定数据
		gl.bufferData(gl.ARRAY_BUFFER,vertexAry,gl.STATIC_DRAW);
			
		//获取vertex下的position变量
		let a_position=gl.getAttribLocation(gl.program,'a_position');
		let a_color=gl.getAttribLocation(gl.program,'a_color');
		let u_size=gl.getUniformLocation(gl.program,'u_size');
		gl.uniform1f(u_size,10.0);

		//bufferAry绑定数据
		gl.vertexAttribPointer(
			a_position,
			2,		  //将vertexAry数组定义为2个数是一组
			gl.FLOAT, //buffer内部数据的类型
			false,// 这个是正交化值数学知识
			5*size,//这个描述了每个数所占用byte的长度值  每5个是一组数据，所占用byte的长度
			0    //偏移几个数字长度（这里的长度是byte类型的长度）
		);

		gl.vertexAttribPointer(
			a_color,
			3,//将vertexAry数组定义为2个数是一组
			gl.FLOAT, //buffer内部数据的类型
			false,// 这个是正交化值数学知识
			5*size,//这个描述了每个数所占用byte的长度值  每5个是一组数据，所占用byte的长度
			2*size,
		);
		
		console.log();
		//确认给a_position赋值
		gl.enableVertexAttribArray(a_position);
		gl.enableVertexAttribArray(a_color); 
		gl.drawArrays(gl.TRIANGLES,0,3)  
	</script>
</html>